<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">摄影师详情</text>
    </view>

    <!-- 摄影师信息 -->
    <view class="photographer-header">
      <view class="cover-bg"></view>
      <view class="info-box">
        <image :src="photographer.avatar" class="avatar"></image>
        <view class="info">
          <text class="name">{{ photographer.name }}</text>
          <view class="rating">
            <text class="iconfont icon-star">⭐</text>
            <text>{{ photographer.rating }} ({{ photographer.ratingCount }}条评价)</text>
          </view>
        </view>
      </view>
      <view class="status-box">
        <view class="status">
          <text :class="['status-tag', photographer.status === '空闲中' ? 'status-free' : 'status-busy']">
            {{ photographer.status }}
          </text>
          <text class="status-text">{{ photographer.status === '空闲中' ? '今日可接单' : '暂不接单' }}</text>
        </view>
        <button class="follow-btn">关注</button>
      </view>
      <view class="stats">
        <view class="stat-item">
          <text class="stat-value">{{ photographer.experience }}年+</text>
          <text class="stat-label">摄影经验</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ photographer.worksCount }}+</text>
          <text class="stat-label">作品数量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ photographer.goodRate }}%</text>
          <text class="stat-label">好评率</text>
        </view>
      </view>
    </view>

    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index" 
        :class="['tab-item', currentTab === index ? 'active' : '']"
        @tap="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- 作品集 -->
    <view v-if="currentTab === 0" class="works-section">
      <view class="section-header">
        <text class="section-title">精选作品</text>
        <text class="view-all">查看全部</text>
      </view>
      <view class="works-grid">
        <image 
          v-for="(work, index) in photographer.works" 
          :key="index" 
          :src="work" 
          mode="aspectFill" 
          class="work-item"
        ></image>
      </view>

      <view class="intro-card">
        <text class="card-title">摄影师介绍</text>
        <text class="card-content">{{ photographer.introduction }}</text>
      </view>

      <view class="style-card">
        <text class="card-title">拍摄风格</text>
        <view class="style-tags">
          <text 
            v-for="(style, index) in photographer.styles" 
            :key="index" 
            class="style-tag"
          >
            {{ style }}
          </text>
        </view>
      </view>
    </view>

    <!-- 套餐 -->
    <view v-if="currentTab === 1" class="package-section">
      <view 
        v-for="(pkg, index) in photographer.packages" 
        :key="index" 
        class="package-card"
      >
        <view class="package-header">
          <text class="package-name">{{ pkg.name }}</text>
          <text class="package-price">¥{{ pkg.price }}</text>
        </view>
        <view class="package-content">
          <view 
            v-for="(item, idx) in pkg.items" 
            :key="idx" 
            class="package-item"
          >
            <text class="iconfont icon-check">✓</text>
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 评价 -->
    <view v-if="currentTab === 2" class="review-section">
      <view class="review-summary">
        <view class="review-score">
          <text class="score">{{ photographer.rating }}</text>
          <view class="stars">
            <text v-for="i in 5" :key="i" class="iconfont" :class="i <= Math.floor(photographer.rating) ? 'icon-star-filled' : 'icon-star-outline'">
              {{ i <= Math.floor(photographer.rating) ? '⭐' : '☆' }}
            </text>
          </view>
        </view>
        <text class="review-count">{{ photographer.ratingCount }}条评价</text>
      </view>

      <view 
        v-for="(review, index) in photographer.reviews" 
        :key="index" 
        class="review-card"
      >
        <view class="review-header">
          <image :src="review.avatar" class="reviewer-avatar"></image>
          <view class="reviewer-info">
            <text class="reviewer-name">{{ review.name }}</text>
            <view class="review-rating">
              <text v-for="i in 5" :key="i" class="iconfont" :class="i <= review.rating ? 'icon-star-filled' : 'icon-star-outline'">
                {{ i <= review.rating ? '⭐' : '☆' }}
              </text>
              <text class="review-date">{{ review.date }}</text>
            </view>
          </view>
        </view>
        <text class="review-content">{{ review.content }}</text>
        <view class="review-images" v-if="review.images && review.images.length">
          <image 
            v-for="(img, idx) in review.images" 
            :key="idx" 
            :src="img" 
            mode="aspectFill" 
            class="review-image"
          ></image>
        </view>
      </view>
    </view>

    <!-- 底部预约按钮 -->
    <view class="booking-bar">
      <view class="price-info">
        <text class="price-label">起步价</text>
        <text class="price-value">¥{{ photographer.price }}</text>
      </view>
      <button class="booking-btn" @tap="goToBooking">立即预约</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      currentTab: 0,
      tabs: ['作品集', '套餐', '评价'],
      photographer: {
        id: 1,
        name: '小明摄影',
        avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        rating: 4.9,
        ratingCount: 125,
        status: '空闲中',
        experience: 3,
        worksCount: 500,
        goodRate: 98,
        price: 199,
        introduction: '专注于Cosplay摄影3年，擅长动漫人物还原与场景营造。曾为多个知名Coser拍摄作品，作品曾在各大漫展和社交平台获得高度认可。擅长后期调色和构图，能够根据不同角色特点打造专属风格。',
        styles: ['日系清新', '暗黑系', '古风', '二次元'],
        works: [
          'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          'https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
          'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
        ],
        packages: [
          {
            name: '基础套餐',
            price: 199,
            items: [
              '30分钟拍摄时间',
              '10张精修照片',
              '提供电子版原片',
              '3天内出片'
            ]
          },
          {
            name: '标准套餐',
            price: 299,
            items: [
              '60分钟拍摄时间',
              '20张精修照片',
              '提供电子版原片',
              '3天内出片',
              '提供简单道具'
            ]
          },
          {
            name: '高级套餐',
            price: 399,
            items: [
              '90分钟拍摄时间',
              '30张精修照片',
              '提供电子版原片',
              '3天内出片',
              '提供全套道具',
              '赠送视频花絮'
            ]
          }
        ],
        reviews: [
          {
            name: '小樱',
            avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
            rating: 5,
            date: '2023-11-20',
            content: '摄影师很专业，拍出来的照片超级好看！角色还原度很高，构图和光线都处理得很棒。而且人很nice，拍摄过程中给了很多指导，让我这个新手也能拍出好看的照片。',
            images: [
              'https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
              'https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80'
            ]
          },
          {
            name: '小明',
            avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
            rating: 4,
            date: '2023-11-15',
            content: '拍摄体验很好，摄影师很有耐心。照片质量不错，就是后期处理时间稍微有点长。总体来说还是很满意的。',
            images: []
          }
        ]
      }
    }
  },
  onLoad(options) {
    this.id = options.id;
    // 这里应该根据id从服务器获取摄影师信息
    // this.getPhotographerInfo(this.id);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.currentTab = index;
    },
    goToBooking() {
      uni.navigateTo({
        url: `/pages/booking/booking?id=${this.photographer.id}`
      });
    }
  }
}
</script>

<style>
.container {
  padding-bottom: 120rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.photographer-header {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.cover-bg {
  height: 240rpx;
  background: linear-gradient(to right, #9333EA, #EC4899);
}

.info-box {
  margin-top: -60rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: flex-end;
}
.container {
  padding-bottom: 120rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.photographer-header {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.cover-bg {
  height: 240rpx;
  background: linear-gradient(to right, #9333EA, #EC4899);
}

.info-box {
  margin-top: -60rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: flex-end;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  margin-right: 20rpx;
}

.info {
  padding-bottom: 10rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #1F2937;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #6B7280;
}

.icon-star {
  color: #FBBF24;
  margin-right: 4rpx;
}

.status-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #F3F4F6;
}

.status {
  display: flex;
  align-items: center;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
}

.status-free {
  background-color: #10B981;
  color: #fff;
}

.status-busy {
  background-color: #EF4444;
  color: #fff;
}

.status-text {
  font-size: 24rpx;
  color: #6B7280;
}

.follow-btn {
  background-color: #9333EA;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  border: none;
}

.stats {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #F3F4F6;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #1F2937;
  display: block;
}

.stat-label {
  font-size: 24rpx;
  color: #6B7280;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  position: sticky;
  top: 80rpx;
  z-index: 10;
  border-bottom: 1rpx solid #F3F4F6;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #6B7280;
}

.tab-item.active {
  color: #9333EA;
  font-weight: 500;
  border-bottom: 4rpx solid #9333EA;
}

/* 作品集样式 */
.works-section {
  padding: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1F2937;
}

.view-all {
  font-size: 24rpx;
  color: #9333EA;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rpx;
  margin-bottom: 30rpx;
}

.work-item {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
}

.intro-card, .style-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
  margin-bottom: 10rpx;
  display: block;
}

.card-content {
  font-size: 26rpx;
  color: #6B7280;
  line-height: 1.5;
}

.style-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.style-tag {
  background-color: #EDE9FE;
  color: #9333EA;
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
}

/* 套餐样式 */
.package-section {
  padding: 20rpx;
}

.package-card {
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.package-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #F9FAFB;
  border-bottom: 1rpx solid #F3F4F6;
}

.package-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
}

.package-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #9333EA;
}

.package-content {
  padding: 20rpx;
}

.package-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.icon-check {
  color: #10B981;
  margin-right: 10rpx;
  font-size: 24rpx;
}

.package-item text:last-child {
  font-size: 26rpx;
  color: #6B7280;
}

/* 评价样式 */
.review-section {
  padding: 20rpx;
}

.review-summary {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.review-score {
  margin-right: 30rpx;
}

.score {
  font-size: 48rpx;
  font-weight: bold;
  color: #1F2937;
}

.stars {
  display: flex;
  color: #FBBF24;
}

.review-count {
  font-size: 26rpx;
  color: #6B7280;
}

.review-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.review-header {
  display: flex;
  margin-bottom: 10rpx;
}

.reviewer-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #1F2937;
  display: block;
}

.review-rating {
  display: flex;
  align-items: center;
  font-size: 24rpx;
}

.icon-star-filled, .icon-star-outline {
  font-size: 24rpx;
}

.review-date {
  margin-left: 10rpx;
  color: #9CA3AF;
}

.review-content {
  font-size: 26rpx;
  color: #4B5563;
  line-height: 1.5;
  margin: 10rpx 0;
}

.review-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 10rpx;
}

.review-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
}

/* 底部预约栏 */
.booking-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.price-info {
  flex: 1;
}

.price-label {
  font-size: 24rpx;
  color: #6B7280;
}

.price-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #9333EA;
}

.booking-btn {
  background-color: #9333EA;
  color: #fff;
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  border: none;
}
</style>